<template>
  <el-form
    :model="ruleForm"
    ref="ruleForm"
    status-icon
    :rules="rules"  
    class="demo-ruleForm"
  >
    <el-form-item  prop="id" v-if="false">
      <el-input v-model="ruleForm.id" autocomplete="off"/>
    </el-form-item>
    <el-form-item label="用户名:" prop="username">
      <el-input v-model="ruleForm.username" autocomplete="off"/>
    </el-form-item>
    <el-form-item label="姓名:" prop="name">
      <el-input v-model="ruleForm.name"  autocomplete="off"/>
    </el-form-item>
    <el-form-item label="性别:" prop="gender">
      <el-input v-model="ruleForm.gender"  autocomplete="off"/>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model="ruleForm.age"  autocomplete="off"/>
    </el-form-item>
     <el-form-item label="职称" prop="job">
      <el-input v-model="ruleForm.job"  autocomplete="off"/>
    </el-form-item>
    <el-form-item label="手机号:" prop="phone">
      <el-input v-model="ruleForm.phone"  autocomplete="off"/>
    </el-form-item>
    <el-form-item label="社区" prop="userCommunity">
      <el-input v-model="ruleForm.userCommunity"  autocomplete="off"/>
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="submitForm()">提交</el-button>
      <el-button @click="resetForm()">清空</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { ElMessage } from 'element-plus'
export default {
  props:{
      current:{}
    },
  data() {
    return {
      ruleForm: {},
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
          {
            min: 2,
            max: 6,
            message: "长度在2到6个字符",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
          {
            min: 2,
            max: 4,
            message: "长度在2到4个字符",
            trigger: "blur",
          },
        ],
        age: [
          {
            required: true,
            message: "请输入年龄",
            trigger: "blur",
          },
          {
            min: 1,
            max: 3,
            message: "长度在1到3个字符",
            trigger: "blur",
          },
        ],
        userCommunity: [
            {
            required:true,
            message:"请输入社区名称",
            trigger:"blur"
            }
        ],  
      },
    };
  },
  methods: {
    submitForm() {
     this.$axios({
          method: "post",
          url: "http://localhost:8080/nav/tylir/communitytwo/update",
          data:this.$qs.stringify(this.ruleForm)
        }).then(res => {
            console.log(res.data);
            this.persons = res.data;
            if(res.data.code == 1){
              ElMessage('修改成功');
              this.$router.go(-1);
            }else{
              console.log("error");
            }
        })
    },
    resetForm(){
      this.ruleForm.id = "",
      this.ruleForm.username = "",
      this.ruleForm.name = "",
      this.ruleForm.gender = "",
      this.ruleForm.age = "",
      this.ruleForm.job = "",
      this.ruleForm.phone = "",
      this.ruleForm.userCommunity = ""
    },
  },
  mounted(){
      this.ruleForm = this.current;
    }
};
</script>

<style scoped>
</style>